<template>
  <div>待开发</div>
    <!-- <div class="main">
      <div style="width: 100%;height: 40px;background-color: #fff;margin-bottom: 20px;padding: 10px;">当前模块:<span
          style="font-weight: bold;">待开发</span> </div>
      <div class="main-body">
  
        <div class="main-header float-left">
  
          <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
  
            <el-form-item label="类别：">
              <el-select v-model="formInline.benqu" placeholder="请选择">
                <el-option v-for="item in ddl_lb_list" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单位：" v-if="schoolList.length > 0">
              <el-select v-model="formInline.gzXqdm" placeholder="请选择">
                <el-option v-for="(item, index) in schoolList" :key="index" :label="item.XQJC" :value="item.NEW_XQDM">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="教职工名称">
              <el-input v-model="formInline.xm" placeholder="请输入教职工名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
              <el-button type="primary" icon="el-icon-download">下载本区教职工表</el-button>
            </el-form-item>
          </el-form>
        </div>
  
        <el-dialog title="教职工详细信息显示窗口" :visible.sync="dialogDetails" width="800px" :before-close="handleClose">
          <div style="text-align: center;width: 100%;height: 50px;background-color: antiquewhite;line-height: 50px;">
            此页面内容可以直接打印，请按右面的图标打印本页内容
            <el-button type="primary" icon="el-icon-printer" style="float: right;" v-print="printOption">打印</el-button>
          </div>
          <div style="padding: 16px;" class="font-all" id="nbprint">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border:none;">
              <tr>
                <td
                  style=" border-style:none; text-align:left; font-size:18px; font-family:微软雅黑; text-align:center; height:40px;">
                  教职工基本信息登记表
                </td>
              </tr>
  
            </table>
  
            <table border='0' cellspacing="0" cellpadding="0"
              style="border-collapse:collapse;border-style:none; font-size:13px; width:100%;">
              <tr>
                <td style="border:1px solid #3c3c3c; height:33px; text-align:center; width:100px;">
                  姓名
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center; width:200px;">
                  <span v-text="JiaoZhiGongInfo.XM"></span>
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center; width:100px;">
                  性别
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center; width:200px;">
                  <span v-text="JiaoZhiGongInfo.XB"></span>
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center; width:100px;" rowspan="3">照片</td>
              </tr>
              <tr>
                <td style="border:1px solid #3c3c3c; height:33px; text-align:center;">
                  国家地区
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center; ">
                  <span v-text="JiaoZhiGongInfo.mc"></span>
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center; ">
                  民族
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center;">
                  <span v-text="JiaoZhiGongInfo.MZ"></span>
                </td>
              </tr>
              <tr>
                <td style="border:1px solid #3c3c3c; height:33px; text-align:center;">
                  政治面貌
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center; ">
                  <span v-text="JiaoZhiGongInfo.ZZMM"></span>
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center; ">
                  出生年月
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center;">
                  <span v-text="JiaoZhiGongInfo.CSNY"></span>
                </td>
              </tr>
              <tr>
                <td style="border:1px solid #3c3c3c; height:33px; text-align:center;">
                  身份证件类型
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center; ">
                  <span v-text="JiaoZhiGongInfo.SFZJLX"></span>
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center; ">
                  身份证件号码
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center;" colspan="2">
                  <span v-text="JiaoZhiGongInfo.SFZJH"></span>
                </td>
              </tr>
              <tr>
                <td style="border:1px solid #3c3c3c; height:33px; text-align:center;">
                  现在编单位
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center; ">
                  <span v-text="JiaoZhiGongInfo.DJDW"></span>
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center; ">
                  编制所在校区
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center;" colspan="2">
                  <span v-text="JiaoZhiGongInfo.DJXQ"></span>
                </td>
              </tr>
              <tr>
                <td style="border:1px solid #3c3c3c; height:33px; text-align:center;">
                  现工作单位
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center; ">
                  <span v-text="JiaoZhiGongInfo.GZDW"></span>
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center; ">
                  工作校区
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center;" colspan="2">
                  <span v-text="JiaoZhiGongInfo.GZXQ"></span>
                </td>
              </tr>
              <tr>
                <td style="border:1px solid #3c3c3c; height:33px; text-align:center;">
                  教职工编号
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center; ">
                  <span v-text="JiaoZhiGongInfo.TeacherId"></span>
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center; ">
                  登记状态
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center;" colspan="2">
                  <span v-text="JiaoZhiGongInfo.JSZT"></span>
                </td>
              </tr>
              <tr>
                <td style="border:1px solid #3c3c3c; height:33px; text-align:center;">
                  联系电话
                </td>
                <td style="border:1px solid #3c3c3c; text-align:center; " colspan="4">
                  <span v-text="JiaoZhiGongInfo.LXDH"></span>
                </td>
  
              </tr>
            </table>
            <table border='0' cellspacing="0" cellpadding="0"
              style="border-collapse:collapse;border-style:none; font-size:15px; width:100%;">
              <tr>
                <td style="text-align:right; font-size:13px; height:50px; line-height:50px; padding-right:10px;">
                  查询日期:{{ getNowTimeDate() }}
                </td>
              </tr>
            </table>
          </div>
  
      
        </el-dialog>
  
        <div class="main-center float-left">
          <el-table :data="tableData" height="650" style="width: 100%;margin-top: 6px;"
            :header-cell-style="{ background: '#fafafa', color: '#000000e0', fontWeight: 600 }">
            <el-table-column type="index" label="序号" width="100"></el-table-column>
            <el-table-column prop="XM" label="教职工姓名"></el-table-column>
            <el-table-column prop="xb" label="性别"></el-table-column>
            <el-table-column prop="DJ_XX" label="在编单位"></el-table-column>
            <el-table-column prop="DJ_XQ" label="所在校区"></el-table-column>
            <el-table-column prop="GZ_XQ" label="工作单位"></el-table-column>
            <el-table-column prop="LXDH" label="联系电话"></el-table-column>
            <el-table-column prop="JSZT" label="状态" width="100"></el-table-column>
            <el-table-column label="详情" width="100">
              <template slot-scope="scope" style="z-index: -9999;">
                <el-button @click="handleClick(scope.row)" type="text" size="small"
                  style="color: #ff4d4f;">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
  
          <div class="footer-pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="formInline.currentPage" :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]"
              :page-size="formInline.limit" layout="total, sizes, prev, pager, next, jumper" :total="formInline.total">
            </el-pagination>
          </div>
        </div>
  
      </div>
    </div> -->
  </template>
  <script>
  import httplogin from "../../api/login";
  export default {
    name: 'Social',
    data() {
      return {
        printOption: {
          id: 'nbprint', // 打印元素的id 不需要携带#号
          popTitle: '教职工基本信息登记表' // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
        },
        tableData: [],
        formInline: {
          benqu: "",
          gzXqdm: '',
          xm: '',
          ddl_xz: '',
          ddl_jdfs: '',
          currentPage: 1,
          limit: 10,
          total: 0
        },
        ddl_lb_list: [
          {
            value: 0,
            label: '本区编内'
          },
          {
            value: 1,
            label: '本区编外'
          },
        ],//类别 options
        ddl_bb_list: [],//办别 options
        ddl_xz_list: [
          {
            value: '全部',
            label: '全部'
          },
          {
            value: '普通',
            label: '普通'
          },
          {
            value: '工读',
            label: '工读'
          },
          {
            value: '特教',
            label: '特教'
          },
        ],//性质 options
        ddl_jdfs_list: [
          {
            value: '全部',
            label: '全部'
          },
          {
            value: '走读',
            label: '走读'
          },
          {
            value: '寄宿',
            label: '寄宿'
          },
        ],//就读方式 options
        dialogDetails: false,
        JiaoZhiGongInfo: {},
        schoolList: [],
  
      }
    },
    mounted() {
      this.getOnGuardFacultyway()
      this.getschoolList()
    },
    methods: {
      async getOnGuardFacultyway() {
        let data = {
          GWZT: 1,
          page: this.formInline.currentPage,
          size: this.formInline.limit,
          benqu: this.formInline.benqu,
          gzXqdm: this.formInline.gzXqdm,
          xm: this.formInline.xm
        }
        let res = await httplogin.getOnGuardFaculty(data);
        if (res.data.code == 200) {
          this.tableData = res.data.data.facultyInfo,
            this.formInline.total = res.data.data.num
        }
      },
      async getschoolList() {
        let res = await httplogin.getUserPermissionInfo();
        if (res.data.code == 200) {
          if (res.data.data.estate == "区级") {
            this.schoolList = res.data.data.UserPermission
            this.sortPingyinfun(this.schoolList)
          }
        }
      },
  
      getNowTimeDate() {
        const now = new Date();
        const year = now.getFullYear();
        const month = ('0' + (now.getMonth() + 1)).slice(-2);
        const day = ('0' + now.getDate()).slice(-2);
        // const hours = ('0' + now.getHours()).slice(-2);
        // const minutes = ('0' + now.getMinutes()).slice(-2);
        // const seconds = ('0' + now.getSeconds()).slice(-2);
        const formattedTime = year + "年" + month + "月" + day + "日"
        return formattedTime
      },
      sortPingyinfun(list) {
        list.sort((a, b) => a.XQJC.localeCompare(b.XQJC))
        return list
      },
      //点击查看详情 open 弹框
      handleClick(row) {
        this.getOnGuardFacultyInfoway(row)
        this.dialogDetails = true
      },
      async getOnGuardFacultyInfoway(val) {
        var data = {
          jzgId: val.TeacherID
        }
        var res = await httplogin.getOnGuardFacultyInfo(data)
        if (res.data.code == 200) {
          this.JiaoZhiGongInfo = res.data.data.jzgInfo
  
        }
      },
      //close 弹框
      handleClose() {
        this.dialogDetails = false
      },
      onSubmit() {
        this.getOnGuardFacultyway()
        // console.log(this.formInline);
      },
      handleSizeChange(val) {
        this.formInline.limit = val
        this.getOnGuardFacultyway()
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.formInline.currentPage = val
        this.getOnGuardFacultyway()
        console.log(`当前页: ${val}`);
      }
    }
  }
  </script>
  
  <style scoped>
  .main {
    width: 100%;
    float: left;
    height: auto;
    box-sizing: border-box;
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f6f6f6;
    overflow-x: auto;
    overflow-y: auto;
  }
  
  .main-body {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 18px;
    border-radius: 12px;
  }
  
  .float-left {
    width: 100%;
    height: auto;
    float: left;
  }
  
  .main-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 8px;
  }
  
  .d-flex {
    display: flex;
    align-items: center;
  }
  
  .mr-24 {
    margin-right: 24px;
  }
  
  .fontcolor {
    color: rgba(0, 0, 0, 0.88);
    word-break: break-word;
    line-height: 1.5714285714285714;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    font-size: 14px;
    box-sizing: border-box;
  }
  
  .footer-pagination {
    padding: 10px 0 0 0;
    text-align: right;
  }
  
  .font-all {
    color: rgba(0, 0, 0, 0.88);
    font-size: 14px;
    line-height: 1.5714285714285714;
    list-style: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    scrollbar-color: rgba(0, 0, 0, 0.25) rgba(5, 5, 5, 0.06);
  }
  </style>
  
  <style scoped>
  ::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
  }
  
  ::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
  }
  
  ::v-deep .el-dialog__header {
    background-color: #ff4d4f !important;
  
  }
  
  ::v-deep .el-dialog__title {
    line-height: 24px;
    font-size: 20px;
    color: #fff !important;
    /* font-weight: 600; */
  }
  </style>